<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MainWindow</title>

      <style>
          *{
              margin : 0;
              padding : 0;
              overflow: hidden;
          }
          #merge-canvas{
              position : absolute;
              left: 0;
              top: 0;
              background: transparent;
              z-index: 9993;
              visibility: hidden;
          }
          #background-canvas {
              position : absolute;
              left: 0;
              top: 0;
              background: transparent;
              z-index: 9994;
          }
          #annotation-canvas {
              position : absolute;
              left: 0;
              top: 0;
              background: transparent;
              z-index: 9995;
          }
          #zoom-tip {
              position : absolute;
              left: 0;
              top: 0;
              width: 60px;
              height: 24px;
              background-color: rgba(0, 0, 0, 0.5);
              color: red;
              text-align: center;
              display: none;
              z-index: 9996;
          }
          #drag-region{
              position : absolute;
              width : 100%;
              height : 100%;
              background: transparent;
              z-index: 9997;
              cursor: move;
          }
          #mouse {
              position : absolute;
              left: -50%;
              top: -50%;
              pointer-events: none;
              z-index: 9999;
          }
          .text-editor {
              position : fixed;
              border: none;
              outline: red dashed 1px;
              outline-offset: 2px;
              background: transparent;
              z-index: 9998;
              font-family: sans-serif;
              min-width: 10px;
              caret-color: red;
              overflow: hidden;
              overflow-wrap: anywhere;
          }
          .hidden-text-editor {
              visibility: hidden;
          }
      </style>
  </head>

  <body>
    <div id="app"></div>
    <canvas id="merge-canvas"></canvas>
    <canvas id="background-canvas"></canvas>
    <canvas id="annotation-canvas"></canvas>
    <div id="zoom-tip"></div>
    <div id="drag-region" data-tauri-drag-region title="You can scroll the mouse to zoom in and out. Double click on the window to close it"></div>
    <div id="mouse"></div>
    <script type="module" src="/src/pages/main/main.ts"></script>
  </body>
</html>
